<template>
  <div>
    <table>
      <caption>
        欢迎光临 vue开发的收银系统 水果店
      </caption>
      <tr>
        <th>苹果{{ price }}￥斤,折扣{{ zk }}折</th>
      </tr>
      <tr>
        <td>请输入你要购买的斤数 <input type="text" v-model="jin" /></td>
      </tr>
      <tr>
        <td><button @click="btn">结账购买</button></td>
      </tr>
      <tr>
        <td>
          结账单：
          <span>总价：{{ all }}</span>
          <span>折后：{{ zkAll }}</span>
          <span>省了：{{ sheng }}</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      zk: 8,
      jin: 0,
      all: 0,
      zkAll: 0,
      sheng: 0,
    }
  },
  methods: {
    btn() {
      this.all = this.price * this.jin
      this.zkAll = ((this.price * this.jin) / 10) * this.zk
      this.sheng = this.all - this.zkAll
    },
  },
}
</script>

<style></style>
